<!--微信账号-->
<template>
  <div class="app-container">
    <div class="search">
      <el-row>
      <el-input
        class="search-input"
        v-model="queryParams.key"
        placeholder="输入房间号|房间名称|玩家名称|玩家id查询"
        :style="{ width: '320px' }"
      ></el-input>
      <el-button type="primary" icon="el-icon-search" @click="handleQueryByKey">查询</el-button>
      <el-button type="primary" icon="el-icon-search" @click="handleQueryAll">全部</el-button>
      </el-row>
      <el-button type="primary" icon="el-icon-plus" @click="goClick(1)">添加数据</el-button>
    </div>
    <el-table v-loading="loading" :data="tableData">
      <el-table-column
        label="俱乐部ID"
        align="center"
        prop="clubId"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="俱乐部名称"
        align="center"
        prop="clubName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="房间号"
        align="center"
        prop="roomNumber"
        :show-overflow-tooltip="true"
      />
      <el-table-column
        label="房间名称"
        align="center"
        prop="roomName"
        :show-overflow-tooltip="true"
      />
      <el-table-column
              label="是否开启保险"
              align="center"
              prop="insuranceEnabled"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="保险池"
              align="center"
              prop="insurancePool"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="综活跃积分"
              align="center"
              prop="totalActivityPoints"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="JP贡献值"
              align="center"
              prop="jpContribution"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="昵称"
              align="center"
              prop="nickname"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="玩家ID"
              align="center"
              prop="playerId"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="带入"
              align="center"
              prop="buyIn"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="盲注级别"
              align="center"
              prop="blindLevel"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="手数"
              align="center"
              prop="hands"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="战绩"
              align="center"
              prop="score"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="战绩流水"
              align="center"
              prop="scoreDetails"
              :show-overflow-tooltip="true"
            />
      <el-table-column
              label="结束时间"
              align="center"
              prop="displayedEndTime"
              :show-overflow-tooltip="true"
            />
      <el-table-column label="操作" align="center" >
        <template slot-scope="scope">
         <el-button
             size="mini"
             type="text"
             @click="goClick(3, scope.row)">修改</el-button>
          <el-button
            size="mini"
            type="text"
            @click="goClick(2, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getPlayData"/>

    <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="640px" center>
      <el-form ref="form" :rules="rules" :model="form" label-width="120px">
            <el-form-item label="俱乐部Id" prop="clubId">
              <el-input placeholder="请输入俱乐部Id" v-model.number="form.clubId"> </el-input>
            </el-form-item>
            <el-form-item label="俱乐部名称"  prop="clubName">
              <el-input placeholder="请输入俱乐部名称" v-model="form.clubName" />
            </el-form-item>
            <el-form-item label="房间号" prop="roomNumber" >
              <el-input placeholder="请输入房间号" v-model.number="form.roomNumber" />
            </el-form-item>
            <el-form-item label="房间名称" prop="roomName">
              <el-input placeholder="请输入房间名称" v-model="form.roomName" />
            </el-form-item>
            <el-form-item label="是否开启保险池" >
              <el-input placeholder="是否开启保险池" v-model.number="form.insuranceEnabled" />
            </el-form-item>
            <el-form-item label="保险池">
              <el-input placeholder="保险池" v-model.number="form.insurancePool" />
            </el-form-item>
            <el-form-item label="总活跃积分" >
              <el-input placeholder="总活跃积分" v-model.number="form.totalActivityPoints" />
            </el-form-item>
            <el-form-item label="JP贡献值">
              <el-input placeholder="JP贡献值" v-model.number="form.jpContribution" />
            </el-form-item>
            <el-form-item label="昵称" prop="nickname">
              <el-input placeholder="昵称" v-model="form.nickname" />
            </el-form-item>
            <el-form-item label="备注名">
              <el-input placeholder="备注名" v-model="form.remarkName" />
            </el-form-item>
            <el-form-item label="用户ID" prop="playerId">
              <el-input placeholder="用户ID" v-model.number="form.playerId" />
            </el-form-item>
            <el-form-item label="带入" prop="buyIn">
              <el-input placeholder="带入" v-model.number="form.buyIn" />
            </el-form-item>
            <el-form-item label="盲注级别" prop="blindLevel">
              <el-input placeholder="盲注级别（Example: 2/4）" v-model="form.blindLevel" />
            </el-form-item>
             <el-form-item label="手数" prop="hands">
               <el-input placeholder="手数" v-model.number="form.hands" />
             </el-form-item>
            <el-form-item label="战绩" prop="score">
              <el-input placeholder="战绩" v-model.number="form.score" />
            </el-form-item>
            <el-form-item label="战绩流水" prop="scoreDetails">
              <el-input placeholder="战绩流水" v-model.number="form.scoreDetails" />
            </el-form-item>
             <el-form-item label="结束时间" prop="displayedEndTime">
               <el-input placeholder="格式：2024-03-17 11:00:00" v-model="form.displayedEndTime"/>
             </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleAddOrUpdate('form')">{{ form.id == -1 ? '新 增' : '修 改' }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>

import {
  getPlayData,
  searchPlayData,
  addOrUpdatePlayData,
  deletePlayData,
} from "@/api/data/playData.js";
import moment from 'moment';
export default {
  data() {
    return {
      queryParams: {
        key: "",
        pageNum: 1,
        pageSize: 10,
      },
      queryAll: true,
      loading: false,
      tableData: [],
      total: 0,
      title: "",
      dialogVisible: false,
      form: {
        id: -1,
        clubId: "",
        clubName: "",
        roomNumber: "",
        roomName: "",
        insuranceEnabled: 0,
        insurancePool: 0,
        totalActivityPoints:0,
        jpContribution: 0,
        nickname:"",
        remarkName:"",
        playerId:0,
        buyIn:0,
        blindLevel:"",
        hands:0,
        score:0,
        scoreDetails:0,
        displayedEndTime:this.getCurrentTime(),
      },
      rules: {
        clubId: [{ required: true, message: "请输入俱乐部id", trigger: "blur" }],
        clubName: [{ required: true, message: "请输入俱乐部名称", trigger: "blur" }],
        roomNumber: [{ required: true, message: "请输入房号", trigger: "blur" }],
        roomName: [{ required: true, message: "请输入房间名称", trigger: "blur" }],
        playerId: [{ required: true, message: "请输入玩家id", trigger: "blur" }],
        nickname: [{ required: true, message: "请输入玩家名称", trigger: "blur" }],
        buyIn: [{ required: true, message: "请输入带入", trigger: "blur" }],
        blindLevel: [{ required: true, message: "请输入盲注级别", trigger: "blur" }],
        hands: [{ required: true, message: "请输入手数", trigger: "blur" }],
        score: [{ required: true, message: "请输入盲战绩", trigger: "blur" }],
        scoreDetails: [{ required: true, message: "请输入战绩流水", trigger: "blur" }],
        displayedEndTime: [{ required: true, message: "格式：2024-03-17 11:00:00", trigger: "displayedEndTime" }],
      },
      options: [],

      dialogTitle:"",
      dialogVisible: false,
    };
  },
  filters: {
      formatDateTime(value) {
        if (!value) return '';
        return moment(value).format('YYYY-MM-DD HH:mm:ss');
      }
    },
  mounted() {
    this.getPlayData();
  },
  methods: {
    handleQueryByKey(){
       console.info("getPlayData start:");
       if (!this.queryParams.key || this.queryParams.key.trim() === "") {
            this.$alert('未输入查询关键字', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 用户确认后的回调
              }
            });
           return;
       };
       console.info("getPlayData -> getPlayData:");
       this.queryAll = false;
       this.getPlayData();
    },
    handleQueryAll() {
      this.queryAll = true;
      this.getPlayData();
    },

    // 查询数据列表
    getPlayData() {
      this.loading = true;
      console.info("getPlayData start:");
      if (this.queryAll){
        // 查询所有数据
        getPlayData(this.queryParams).then((res) => {
          this.tableData = res.rows;
          this.total = res.total;
          this.loading = false;
          console.info("getPlayData :", this.total);
        }).catch((error) => {
           // 处理接口异常
           console.error("getPlayData error:", error);
           this.loading = false;
        });
      } else {
         // 查询指定用户的数据
         console.info("searchPlayData :", this.queryParams);
         searchPlayData(this.queryParams).then((res) => {
                    this.tableData = res.rows;
                    this.total = res.total;
                    this.loading = false;
                    console.info("searchPlayData :", this.tableData);
                  }).catch((error) => {
                     // 处理接口异常
                     console.error("searchPlayData error:", error);
                     this.loading = false;
                  });
      }
    },
    // 操作
    goClick(type, row) {
      switch (type) {
        case 0:
          this.reset();
          // TODO
          break;
        case 1:
          // 增
          this.dialogTitle = "添加数据";
          this.form = {
              id: -1,
              clubId: "",
              clubName: "",
              roomNumber: "",
              roomName: "",
              insuranceEnabled: 0,
              insurancePool: 0,
              totalActivityPoints:0,
              jpContribution: 0,
              nickname:"",
              remarkName:"",
              playerId:0,
              buyIn:0,
              blindLevel:"",
              hands:0,
              score:0,
              scoreDetails:0,
              displayedEndTime: this.getCurrentTime(),
            };
          this.dialogVisible = true;
          break;
        case 2:
          this.form = { ...row };
          this.$confirm("确定要删除" + row.nickname + "在" + row.clubName +"的一条记录吗？", "提示", {
            type: "warning",
          }).then(() => {
            let params={
               id: this.form.id
            }
            console.error("deletePlayData params:", params.id);
            deletePlayData(this.form).then((res) => {
              getPlayData();
            }).catch((error) => {
              // 处理接口异常
              console.error("addOrUpdate error:", error);
              this.loading = false;
            });
            // TODO this.goDeleteWeChat();
          });
          break;
        case 3:
          // 修改
          this.form = { ...row };
          this.dialogTitle = "修改数据";
          this.dialogVisible = true;
          break;
      }
    },
    // 提交
    handleAddOrUpdate(form){
      if (this.isValidDateTimeFormat(this.form.displayedEndTime)){
      //if (false) {
        // 提交新增或修改
        addOrUpdatePlayData(this.form).then((res) => {
          this.isNew = false;
          this.dialogVisible = false;

          // 添加后更新列表
          getPlayData();
        }).catch((error) => {
          // 处理接口异常
          console.error("addOrUpdate error:", error);
          this.loading = false;
        });
      } else {
        // 弹出 Toast 提示时间格式不正确
        console.error("时间格式不正确");
        this.$alert('时间格式不正确, 请输入正确的 "yyyy-MM-dd HH:mm:ss" 格式', '提示', {
              confirmButtonText: '确定',
              callback: action => {
                // 用户确认后的回调
              }
            });
      }
    },

    // 重置表单
    reset() {
      this.form = {
        id: -1,
        clubId: "",
        clubName: "",
        roomNumber: "",
        roomName: "",
        insuranceEnabled: 0,
        insurancePool: 0,
        totalActivityPoints:0,
        jpContribution: 0,
        nickname:"",
        remarkName:"",
        playerId:0,
        buyIn:0,
        blindLevel:"",
        hands:0,
        score:0,
        scoreDetails:0,
        displayedEndTime: this.getCurrentTime(),
      };
      this.resetForm("form");
    },
    getCurrentTime() {
        const currentDate = new Date();
        const year = currentDate.getFullYear();
        const month = String(currentDate.getMonth() + 1).padStart(2, '0');
        const day = String(currentDate.getDate()).padStart(2, '0');
        const hours = String(currentDate.getHours()).padStart(2, '0');
        const minutes = String(currentDate.getMinutes()).padStart(2, '0');
        const seconds = String(currentDate.getSeconds()).padStart(2, '0');

        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
    },
    isValidDateTimeFormat(dateTimeString) {
      const dateTimeRegex = /^(\d{4})-(0[1-9]|1[0-2])-(0[1-9]|[12][0-9]|3[01]) ([01][0-9]|2[0-3]):([0-5][0-9]):([0-5][0-9])$/;
      return dateTimeRegex.test(dateTimeString);
    },
  },
};
</script>
<style lang="scss" scoped>
.search {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 20px;
  .search-input {
    width: 240px;
    margin-right: 20px;
  }
}
</style>
